<script>
	/*
      js中任务分为三种
        1.主线程任务    
        2.宏任务
        3.微任务

        js中具有宏任务队列和微任务队列

      执行流程:主线程代码执行结束->清空微任务队列->执行第一个宏任务(无限循环->清空微任务队列->执行第一个宏任务)
        注意:每个宏任务执行结束之后,都会再去清空微任务队列,清空结束之后才会继续执行下一个宏任务

      面试表达
        如果不将主线程代码视为第一个宏任务,那么就是微任务优先(微任务的优先级高于宏任务)
        如果将主线程代码视为第一个宏任务,那么就是宏任务优先

      栈结构:先进后出,后进先出
      队列结构:先进先出,后进后出
      注意:以上两种结构的实现数据类型其实都是数组

      常见的宏任务:setTimeout,setInterval,所有DOM事件,ajax
      常见的微任务:then(注意promise自身并没有微任务)

      完整说法:setTimeout会开启宏任务,then会开启微任务
      所以:真正的宏任务和微任务是指回调函数
    
    */

	// 案例练习1
	(function test1() {
		console.log("练习一");
		[1, 2, 3].forEach((item) => {
			console.log(item);
		});
		console.log("forEach()之后");

		new Promise((resolve, reject) => {
			// excutor  执行器函数
			console.log("执行excutor");
		});
		console.log("new Promise()之后");

		setTimeout(() => {
			console.log("执行timout回调");
		}, 0);

		console.log("setTimeout()之后");

		Promise.resolve(1).then(() => {
			console.log("promise成功的回调");
		});
		Promise.resolve(1).then(() => {
			console.log("promise成功的回调");
		});
		console.log(".then之后");
	})();

	/*
    1
    2
    3
    forEach()之后
    执行excutor
    new Promise()之后
    setTimeout()之后
    .then之后
    promise成功的回调
    promise成功的回调
    执行timout回调 */

	// 案例练习二

	(function () {
		console.log("练习二");
		setTimeout(function () {
			console.log(1);
			Promise.resolve().then(() => {
				console.log("2");
			});
		}, 0);
		setTimeout(function () {
			console.log(3);
			Promise.resolve().then(() => {
				console.log("4");
			});
		}, 1000);
		Promise.resolve().then(() => {
			console.log("5");
		});
		Promise.resolve().then(() => {
			console.log("6");
		});

		// 顺序：561234
	})();
</script>
